import React, { useState, useEffect } from 'react';
import './NetworkInfo.css';
import { useTheme } from '../theme';

/**
 * 网络信息组件
 * 显示应用的网络访问信息，包括本地IP地址和当前URL
 * 允许用户通过网络在不同设备上访问应用
 * 
 * @returns {JSX.Element} - 网络信息组件
 */
const NetworkInfo = () => {
  // 状态管理
  const [ipAddress, setIpAddress] = useState(''); // 本地IP地址
  const [currentUrl, setCurrentUrl] = useState(''); // 当前URL
  const [visible, setVisible] = useState(true); // 控制组件可见性
  const { activeTheme } = useTheme(); // 获取当前主题

  /**
   * 获取本地IP地址和当前URL
   * 使用fetch API请求一个特殊的JSON文件来获取IP地址
   */
  useEffect(() => {
    // 设置当前URL
    const url = window.location.href;
    setCurrentUrl(url);
    
    // 获取本地IP地址
    const getLocalIpAddress = async () => {
      try {
        // 使用浏览器的网络接口API获取本地IP地址
        const networkInterfaces = await window.navigator.connection || {};
        
        // 提取主机名和端口
        const hostname = window.location.hostname;
        const port = window.location.port || (window.location.protocol === 'https:' ? '443' : '80');
        
        // 构建网络访问URL
        const networkUrl = `${window.location.protocol}//${hostname}:${port}`;
        
        setIpAddress(networkUrl);
      } catch (error) {
        console.error('获取本地IP地址失败:', error);
        setIpAddress('无法获取网络信息');
      }
    };
    
    getLocalIpAddress();
    
    // 设置自动隐藏定时器 - 10秒后自动隐藏
    const timer = setTimeout(() => {
      setVisible(false);
    }, 10000);
    
    // 组件卸载时清除定时器
    return () => clearTimeout(timer);
  }, []);

  /**
   * 关闭网络信息面板
   */
  const handleClose = () => {
    setVisible(false);
  };

  // 如果不可见，返回null（不渲染）
  if (!visible) {
    return null;
  }

  return (
    <div className={`network-info ${activeTheme === 'dark' ? 'dark' : 'light'}`}>
      <div className="network-info-inner">
        <div className="network-info-header">
          <h3>网络访问信息</h3>
          <button 
            className="close-button" 
            onClick={handleClose}
            aria-label="关闭网络信息"
          >
            {/* 关闭图标 */}
            <svg 
              xmlns="http://www.w3.org/2000/svg" 
              viewBox="0 0 24 24" 
              fill="currentColor" 
              width="24" 
              height="24"
            >
              <path 
                fillRule="evenodd" 
                d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" 
                clipRule="evenodd" 
              />
            </svg>
          </button>
        </div>
        
        <div className="network-info-content">
          <p>你可以通过以下方式在网络中访问此应用:</p>
          
          {/* 显示本地IP地址 */}
          {ipAddress && (
            <div className="url-info">
              <p>网络地址:</p>
              <code>{ipAddress}</code>
            </div>
          )}
          
          {/* 显示当前URL */}
          {currentUrl && (
            <div className="url-info">
              <p>当前地址:</p>
              <code>{currentUrl}</code>
            </div>
          )}
          
          <p className="info-note">
            提示: 确保你的设备与此计算机在同一网络中才能通过网络地址访问
          </p>
        </div>
      </div>
    </div>
  );
};

export default NetworkInfo; 